<template>
  <div class="store-list" v-if="storeList.length">
    <div class="store-item" :class="{checked: item.checked}" v-for="item in storeList" @click="select(item)">
      <el-tooltip
        class="box-item"
        :content="item.name"
        effect="light"
        placement="left"
      >
        <span class="tooltip_name">{{item.name}}</span>
      </el-tooltip>  
    </div>
  </div>
  <div v-else class="default">暂无数据</div>
</template>

<script setup lang="ts">
import { ref, watch, reactive, computed, onMounted, inject } from "vue";
import { getMaterialStoreListPost } from '@/api/concreation'

let storeList = reactive<Array<any>>([])
const source = inject('source', [])
const store_list = inject('store_list', [])

const emit = defineEmits(["select"]);

const initData = async () => {
  const status = 1   // 店铺状态 1：正常 2：异常停止 3：暂停，不传这个字段则筛选全部状
  const sub_num = 1   // 是否计算店铺下的商品数据，不传或者传0则不计算，反之则计算
  const params = {status, sub_num, source, store_list}
  const data = await getMaterialStoreListPost(params)
  const arr = data.map((item: any, index: number)=>{
    item.checked = index === 0
    item.name = `${item.name} (${item.sub_num || 0})`
    return item
  })
  storeList.splice(0)
  storeList.push(...arr)
  storeList.length && emit('select', storeList[0].id)
}

const select = (item: any) => {
  const {checked} = item
  if(!checked){
    const arr = storeList.map((ite: any) => {
      const {id} = ite
      ite.checked = id === item.id
      return ite
    })
    storeList.splice(0)
    storeList.push(...arr)
    emit('select', item.id)
  }
}

onMounted(async () => {
  await initData()
})

</script>

<style lang="scss" scoped>
  .store-list{
    .store-item{
      height: 28px;
      display: flex;
      align-items: center;
      line-height: 1;
      font-size: 12px;
      color: #555;
      padding: 0 6px;
      padding-right: 10px;
      &:hover{
        cursor: pointer;
        background-color: #FEEFE5;
      }
      .tooltip_name{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .checked{
      background-color: #FEEFE5;
    }
  }
  .default{
    text-align: center;
    line-height: 160px;
    font-size: 12px;
    color: #888;
    letter-spacing: 2px;
  }
</style>
